<template>
    <div>
        <el-card class="box-card" >
            <div class="w-100 hr-flex-start" style="flex-wrap: wrap; padding: 15px 0;">
                <template v-if="showSearch">
                    <div v-for="(item, index) in searchArr_copy" :key="index" style="min-width: 250px;margin: 8px 0;" >
                        <template v-if="item.slot">
                            <div class="w-h-100 hr-flex-start">
                                <span style="font-size: 14px;">{{ $t('aY6Osbo7zDeac5gzapB3', [item.label]) }}</span>
                                <div class="flex-1 pos-r w-h-100" style="height: 30px;">
                                    <div  style="" class="pos-a w-100 hr-flex-start">
                                        <slot :name="item.slot" :data="item"></slot>
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template v-else>
                            <div class="w-h-100 hr-flex-start">
                                <span style="font-size: 14px;">{{ $t('smonOxDhoGBnytO9Ougey', [item.label]) }}</span>
                                <div class="flex-1 pos-r w-h-100" style="height: 30px;">
                                    <div  style="" class="pos-a w-100 hr-flex-start">
                                        <template v-if="item.type == 'input' ">
                                            <el-input v-model="item.value" :placeholder="item.label" style="padding: 0 20px;"/>
                                        </template>
                                        <template v-else-if="item.type == 'select' ">
                                            <el-select v-model="item.value" :placeholder="item.label" style="padding: 0 20px;">
                                                <el-option :label="op.label" :value="op.value" v-for="(op, op_index) in item.option" :key="op_index" />
                                            </el-select>
                                        </template>
                                        <template v-else-if="item.type == 'date' ">
                                            <el-date-picker
                                                v-model="item.value"
                                                type="date"
                                                :placeholder="item.label"
                                                style="padding: 0 20px;"
                                                value-format="YYYY-MM-DD"
                                            />
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </div>
                </template>
                <div style="margin: 8px 0;">
                    <template v-if="showSearch">
                        <el-button icon="ele-Refresh" @click="refresh">{{ $t('nPhtThUn4LrVtwBcSaYw') }}</el-button>
                        <el-button type="primary" icon="ele-Search" @click="submit">{{ $t('qEh3zD5bC8bZb4bLvFe29') }}</el-button>
                    </template>
                    <slot></slot>
                </div>
            </div>
        </el-card>
    </div>
</template>
<script lang="ts">
    import { defineComponent, ref, PropType, watch } from 'vue';
    export default defineComponent({
        props: {
            searchArr: {
                type: Array as PropType<any[]>,
                default: () => []
            },
            showSearch: {
                type: Boolean,
                default: true,
            }
        },
        setup(this, props, ctx) {

            let searchParams = ref<any>({})
            let searchArr_copy = ref<any[]>([])
            searchArr_copy.value = JSON.parse(JSON.stringify(props.searchArr))
            watch( searchArr_copy, (newVal, odlVal) => {
                let obj: any = {}
                newVal.forEach( (item: any) => {
                    obj[item.key] = item.value
                })
                searchParams.value = obj
            }, {
                deep: true
            })
            // 查询
            const submit = () => {
                ctx.emit('submit', JSON.parse(JSON.stringify(searchParams.value)))
            }
            // 重置
            const refresh = () => {
                searchArr_copy.value.forEach( (item: any) => {
                    if (item.hasOwnProperty('default')) {
                        item.value = item.default
                    } else {
                        item.value = ''
                    }
                })
                setTimeout( () => {
                    ctx.emit('submit', JSON.parse(JSON.stringify(searchParams.value)))
                })
            }
            return {
                searchArr_copy,
                submit,
                refresh,
            }
        },
    })
</script>
<style lang="scss" scoped>
    :deep(.el-card__body) {
        padding: 0 20px;
    }
</style>